import Configer from "../../../script/frame/apiModel/config/Configer";
import {UIConfig, UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import DamagePanelBar, {DamagePanelType} from "./DamagePanelBar";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {DamageButtonInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";


export interface IProp {
    getHurts: (type: DamagePanelType, player: PlayerModel) => { name: string, value: number, id: number }[];
}
export interface IState {
    barVisible: boolean;
    hurts: { name: string, value: number }[]
    visible: boolean;
    type: DamagePanelType
}

export default class DamageButton extends DamageButtonInterface<IProp, IState> {

    constructor(props: IProps & IProp) {
        super(props);
        const barVisible = ( Configer.getConfig(ConfigKey.autoOpenDamage) > 0 )
        this.state = {
            barVisible: barVisible,
            hurts: [],
            visible: true,
            type: DamagePanelType.players,
        }
    }

    render = () => {
        let back = Configer.getResource(ResourceKey.damageButton);
        // if (this.state.barVisible) {
        //     back = Configer.getUIConfig(ResourceKey.taskButtonLeft);
        // } else {
        //     back = Configer.getUIConfig(ResourceKey.taskButtonRight)
        // }

        const damageButtonY = Configer.getUIConfig(UIConfigKey.damageButtonY)
        const size = { h: 0.04980, w: 0.01875 };
        const pos = { x: 0, y: damageButtonY - size.h };

        return  <View   key={GuiKeys.damageButtonContent} style={{
            hidden: !this.state.visible,
            width: size.w,
            height: size.h,
            top: pos.y,
            left: pos.x,
            backgroundImage: back
        }}
        onMouseDown={this.showPanelBar}
        >
            <DamagePanelBar selectType={this.selectType} type={this.state.type}   key={GuiKeys.damagePanelBody} hurts={this.state.hurts} visible={this.state.barVisible}></DamagePanelBar>
        </View>;
    }

    selectType = (type: DamagePanelType) => {
        this.setState({
            ... this.state,
            type: type
        })
    }

    showPanelBar = () => {
        this.setState({
            ... this.state,
            barVisible: !this.state.barVisible
        })
    }
    getVisible = (): boolean => {
        return this.state.visible;
    }
    reflushHurt = (type?: DamagePanelType) => {
        let tempType = this.state.type;
        if (type) {
            tempType =  type;
        }
        const hurts = this.props.getHurts(tempType, PlayerFactory.getInstance().getLocalPlayer());

        this.setState({
            ...this.state,
            hurts,
        })
    }
}